<template>
	<!-- 清缴数据查询 -->
	<view class="qjsjcx">
		<view class="title">清缴数据查询</view>
		<view class="sjfrom">
			<uni-forms :rules="rules" :value="formData" ref="form" validate-trigger="bind" err-show-type="undertext">
				<uni-forms-item name="xzqhszDm" label="房源行政区划" label-width="210rpx">
					<!-- <uni-data-select v-model="formData.xzqhszDm" :localdata="xzqLists"></uni-data-select> -->
					<view class="selectXlk">
						<picker @change="xzqChange" :value="xzqIndex" :range="xzqArr">
							<view>{{xzqArr[xzqIndex]}}</view>
						</picker>
					</view>
				</uni-forms-item>
				<uni-forms-item name="address" label="房源地址" label-width="210rpx">
					<input type="text" v-model="formData.address" class="uni-input-border" placeholder="请输入房源地址" />
				</uni-forms-item>
				<view class="btn">
					<button type="primary" class="qrbtn" @click="submitForm('form')" size="mini">查询</button>
					<button type="default" plain="true" @click="goBack()" size="mini">返回</button>
				</view>
			</uni-forms>
		</view>
	</view>
</template>

<script>
	import {
		getHouseXzqh
	} from "@/utils/common-api.js"
	export default {
		data() {
			return {
				backUrl: "",
				formData: {
					xzqhszDm: "",
					address: "",
				},
				rules: {
					xzqhszDm: {
						rules: [{
							required: false,
							errorMessage: '房源行政区划'
						}, ]
					},
					address: {
						rules: [{
							required: false,
							errorMessage: '请输入房源地址'
						}, ]
					},
				},
				xzqLists: [],
				xzqArr:["请选择"],
				xzqIndex: 0,
			}
		},
		components: {},
		async onShow() {
			if (uni.getStorageSync("dqjcxData")) {
				this.formData = JSON.parse(uni.getStorageSync("dqjcxData"));
			}
			// 获取房源行政区
			this.xzqArr=["请选择"]
			let lists = await getHouseXzqh({})
			if (lists.head.errorCode == "0" && lists.body) {
				this.xzqLists = lists.body
				lists.body.map(item => {
					this.xzqArr.push(item.xzqhmc)
				})
			}
		},
		methods: {
			submitForm(form) {
				this.$refs[form]
					.submit()
					.then(res => {
						this.$commonCzwjs.goPage({
							url: "/pages/sfqj/dqj",
							key: "dqjcxData",
							data: this.formData
						})						
					})
					.catch(errors => {
						console.error('查询失败：', errors)
					})
			},
			//重置表单 
			resetForm() {
				this.formData = {
					xzqhszDm: "",
					address: "", 
				}
			},
			goBack() {
				this.$commonCzwjs.goPage({
					url: "/pages/sfqj/dqj"
				})
			}, 
			// 行政区改变
			xzqChange(e){
				console.log(e)
				this.xzqIndex=e.detail.value
				if(this.xzqIndex===0){
					this.formData.xzqhszDm=""
					return
				}
				this.formData.xzqhszDm=this.xzqLists[this.xzqIndex-1].xzqhszDm
			}

		},
	}
</script>
<style>
	.title {
		width: 100%;
		height: 80rpx;
		background: #3171d5;
		text-align: center;
		line-height: 80rpx;
		color: white;
	}

	.sjfrom {
		padding: 40rpx 10rpx 0 10rpx;
	}

	.uni-input-border {
		padding: 0 20rpx;
		height: 70rpx;
		width: 100%;
		font-size: 28rpx;
		color: #666;
		border: 2rpx #e5e5e5 solid;
		border-radius: 10rpx;
		box-sizing: border-box;
	}

	.uni-input-input {
		font-size: 28rpx;
	}

	::v-deep .uni-forms-item__label {
		justify-content: flex-end !important
	}

	::v-deep .uni-input-placeholder {
		font-size: 28rpx;
	}

	.btn {
		display: flex;
	}

	.btn .qrbtn {
		background-color: #3171d5;
	}

	.btn uni-button {
		width: 590rpx;
		/* background-color: #3171d5; */
		height: 70rpx;
		line-height: 70rpx;
	}

	.btn uni-button:nth-of-type(1) {
		margin-right: 10rpx;
	}

	.btn uni-button:nth-of-type(2) {
		margin-left: 10rpx;
	}

	/* #ifdef MP-WEIXIN */
	.btn button {
		width: 590rpx;
		background-color: #3171d5;
	}

	.btn button:nth-of-type(1) {
		margin-right: 10rpx;
	}

	.btn button:nth-of-type(2) {
		margin-left: 10rpx;
	}

	/* #endif */
	.selectXlk {
		padding: 0 20rpx;
		height: 70rpx;
		line-height: 70rpx;
		width: 100%;
		font-size: 28rpx;
		color: #666;
		border: 1px #e5e5e5 solid;
		border-radius: 10rpx;
		box-sizing: border-box;
		font-size: 28rpx;
	}
</style>